<script setup lang="ts">
import { MsgType, PrescriptionStatus } from '@/enums'
import { getIllnessTimeText, getConsultFlagText } from '@/constants'
import type { Image } from '@/types/consult'
import type { Message, Prescription } from '@/types/room'
import { showImagePreview, showToast } from 'vant'
import EvaluateCard from './EvaluateCard.vue'
import { useUserStore } from '@/stores'
import docImg from '@/assets/avatar-doctor.svg'

import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { usePreview } from '@/composable'
const formatTime = (time: string) => {
  return dayjs(time).format('HH:mm')
}
const props = defineProps<{ list: Message[] }>()

const onPreview = (pics?: Image[]) => {
  if (!pics || !pics.length) return
  const urlList = pics.map((item) => item.url)
  showImagePreview(urlList)
}

const store = useUserStore()

const onLoad = (id: string) => {
  const lastItem = props.list[props.list.length - 1]
  if (lastItem.id === id) {
    window.scrollTo({ top: document.body.scrollHeight })
  }
}

// 4. 删除旧的逻辑，复用hook函数
const { onPreView } = usePreview()

const router = useRouter()
const onBuy = (pre: Prescription) => {
  if (pre.status === PrescriptionStatus.Invalid) return showToast('处方已过期')
  if (pre.status === PrescriptionStatus.NotPayment && !pre.orderId) {
    showToast('请完成支付')
    router.push(`/order/pay?id=${pre.id}`)
    return
  }

  router.push(`/order/${pre.orderId}`)
}
</script>

<template>
  <div v-for="{ id, msgType, msg, from, createTime } in list" :key="id">
    <div class="msg msg-illness" v-if="msgType === MsgType.CardPat">
      <div class="patient van-hairline--bottom">
        <p>
          {{ msg.consultRecord?.patientInfo.name }}
          {{ msg.consultRecord?.patientInfo.genderValue }}
          {{ msg.consultRecord?.patientInfo.age }}岁
        </p>
        <p>
          {{ getIllnessTimeText(msg.consultRecord!.illnessTime) }} |
          {{ getConsultFlagText(msg.consultRecord!.consultFlag) }}
        </p>
      </div>
      <van-row>
        <van-col span="6">病情描述</van-col>
        <van-col span="18">{{ msg.consultRecord?.illnessDesc }}</van-col>
        <van-col span="6">图片</van-col>
        <van-col span="18" @click="onPreview(msg.consultRecord?.pictures)">点击查看</van-col>
      </van-row>
    </div>

    <div class="msg msg-tip" v-if="msgType === MsgType.NotifyTip">
      <div class="content">
        <span class="green">温馨提示：</span>
        <span>{{ msg.content }}</span>
      </div>
    </div>

    <div class="msg msg-tip" v-if="msgType === MsgType.Notify">
      <div class="content">
        <span>{{ msg.content }}</span>
      </div>
    </div>

    <div class="msg msg-to" v-if="msgType === MsgType.MsgText && from === store.userInfo?.id">
      <div class="content">
        <div class="time">{{ formatTime(createTime) }}</div>
        <div class="pao">{{ msg.content }}</div>
      </div>
      <van-image
        src="https://dss0.bdstatic.com/-0U0bXSm1A5BphGlnYG/tam-ogel/3dc528d31e8db3fc5150b8c80a5a02ab_128_128.jpg"
      />
    </div>

    <div class="msg msg-to" v-if="msgType === MsgType.MsgImage && from === store.userInfo?.id">
      <div class="content">
        <div class="time">{{ formatTime(createTime) }}</div>
        <van-image fit="contain" :src="msg.picture?.url" @load="onLoad(id)" />
      </div>

      <van-image
        src="https://dss0.bdstatic.com/-0U0bXSm1A5BphGlnYG/tam-ogel/3dc528d31e8db3fc5150b8c80a5a02ab_128_128.jpg"
      />
    </div>

    <div class="msg msg-from" v-if="msgType === MsgType.MsgText && from !== store.userInfo?.id">
      <van-image :src="docImg" />
      <div class="content">
        <div class="time">{{ formatTime(createTime) }}</div>
        <div class="pao">{{ msg.content }}</div>
      </div>
    </div>

    <div class="msg msg-from" v-if="msgType === MsgType.MsgImage && from !== store.userInfo?.id">
      <van-image :src="docImg" />
      <div class="content">
        <div class="time">{{ formatTime(createTime) }}</div>
        <van-image fit="contain" :src="msg.picture?.url" @load="onLoad(id)" />
      </div>
    </div>

    <div class="msg msg-recipe" v-if="msgType === MsgType.CardPre">
      <div class="content" v-if="msg.prescription">
        <div class="head van-hairline--bottom">
          <div class="head-tit">
            <h3>电子处方</h3>
            <p @click="onPreView(msg.prescription!.id)">
              原始处方 <van-icon name="arrow"></van-icon>
            </p>
          </div>
          <p>
            {{ msg.prescription.name }} {{ msg.prescription.genderValue }}
            {{ msg.prescription.age }}岁 {{ msg.prescription.diagnosis }}
          </p>
          <p>开方时间：{{ msg.prescription.createTime }}</p>
        </div>
        <div class="body">
          <div class="body-item" v-for="med in msg.prescription.medicines" :key="med.id">
            <div class="drug">
              <p>{{ med.name }} {{ med.specs }}</p>
              <p>{{ med.usageDosag }}</p>
            </div>
            <div class="num">x{{ med.quantity }}</div>
          </div>
        </div>
        <div class="foot">
          <span @click="onBuy(msg.prescription!)">购买药品</span>
        </div>
      </div>
    </div>

    <!-- 订单取消 -->
    <div class="msg msg-tip msg-tip-cancel" v-if="msgType === MsgType.NotifyCancel">
      <div class="content">
        <span>订单取消</span>
      </div>
    </div>

    <!-- 评价医生 -->
    <div
      class="msg msg-comment"
      v-if="msgType === MsgType.CardEva || msgType === MsgType.CardEvaForm"
    >
      <evaluate-card :cardData="msg.evaluateDoc!" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/room.scss';
</style>
